<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .showbox{
            width: 200px;height: 200px;background-color: red;display: none;
        }
    </style>
</head>
<body style="height: 3000px;">
    <div class="box"></div>
    <hr>
    <input type="text"><span></span>
    <hr>
    <div class="show">显示隐藏</div>
    <div class="showbox"></div>
    <script>
        // 一,事件类型
        // 1.浏览器时间
        // 1-1onload:页面加载完成(包括页面的所有内容),后触发事件,onload事件中无论js代码写在哪里,都是最后执行
        // var num=0;
        // window.onload=function(){
        //     num++;
        //     console.log(num);
        // }

        // 1-2.onscroll事件,浏览器在滚动的时候触发
        // window.onscroll=function(){
        //     console.log(1);
        // }

        // 1-3onresize:浏览器的可视区(浏览器的窗口)的尺寸发生变化的时候触发的事件
        // var num=0;
        // window.onresize=function(){
        //     num++;
        //     console.log(num);
        // }

        // 2.鼠标事件
        // 2.1焦点事件,一般文本框,a标签具有,输入的光标是否停留在元素上
        // onfocus:获取焦点事件
        // onblur:失去焦点事件
        // var spanEle=document.querySelector('span');
        // var inputEle=document.querySelector('input');
        // inputEle.onfocus=function(){
        //     // console.log(1);
        //     spanEle.innerHTML="请输入用户名";
        //     spanEle.style.color="#000";
        // }
        // inputEle.onblur=function(){
        //     // console.log(2);
        //     if(inputEle.value==""){
        //         spanEle.innerHTML="不能为空";
        //         spanEle.style.color="#f00";
        //     }else{
        //         spanEle.innerHTML="对,输入对了";
        //         spanEle.style.color="green";
        //     } 
        // }

        // 2.2 onclick onmousedown onmouseup
        // onmousedown:鼠标按下事件
        // onmouseup:鼠标抬起事件
        // onmousemove:鼠标移动事件
        // document.onmousedown=function(){
        //     console.log("鼠标按下");
        // }
        // document.onmouseup=function(){
        //     console.log("鼠标抬起");
        // }
        // document.onmousemove=function(){
        //     console.log("鼠标移动事件");
        // }

        // 2.3onmouseover 鼠标移入
        // onmouseout鼠标移出
        // var show=document.querySelector(".show");
        // var showbox=document.querySelector('.showbox');
        // show.onmouseover=function(){
        //     showbox.style.display="block"
        // }
        // show.onmouseout=function(){
        //     showbox.style.display="none"
        // }

        // 2-4.oncontextment :右键单击事件
        // document.oncontextmenu=function(){
        //     console.log("右键触发");
        // }

    </script>
</body>

</html>